<script lang="ts" setup>
import { useBasicInfoStore, useConfigStore } from "@/store";

const props = defineProps({
  eid: {
    type: [Number, String],
    default: 0
  }
});

const filterList = ["专属", "部位", "公共"];
const weaponList = ["普通", "困难"];

const foldList = ref([true, false, false, false, false]);
const foldWeaponList = ref([true, false, false, false, false]);

const basicStore = useBasicInfoStore();
const configStore = useConfigStore();

const curEqu = computed(() => basicStore.equipment_list.filter((a) => a.id == props.eid)?.[0])

const alternative_list = (id: ID, type = -1) => {
  let temp
    = basicStore.equipment_list.filter((item) => item.id == id)?.[0]
      ?.alternative ?? [];
  // 共有词条
  if (type == 2) {
    temp = temp.filter((a) => basicStore.entry_list?.[a]?.type == 1);
    // temp = temp.filter(a => props_public.includes(a))
  }
  // 部位专属词条
  if (type == 1) {
    temp = temp.filter((a) =>
      [2, 3, 4, 5, 6, 7, 8].includes(basicStore.entry_list?.[a]?.type ?? 0)
    );
  }
  // 专属词条
  if (type == 0) {
    temp = temp.filter((a) => (basicStore.entry_list?.[a]?.type ?? 0) > 10000);
  }
  return temp;
};

const weapon_list = (type = -1) => {
  if (type == 0) {
    return Object.keys(basicStore.entry_list ?? {})
      .filter((key) => basicStore.entry_list?.[key]?.type == 9)
      .sort((a, b) => (basicStore.entry_list?.[a]?.order ?? 0) - (basicStore.entry_list?.[b]?.order ?? 0))
      .map(Number);
  }
  if (type == 1) {
    return Object.keys(basicStore.entry_list ?? {})
      .filter((key) => basicStore.entry_list?.[key]?.type == 10)
      .sort((a, b) => (basicStore.entry_list?.[a]?.order ?? 0) - (basicStore.entry_list?.[b]?.order ?? 0))
      .map(Number);
  }
  return [];
};

const propSelected = (id: number) => {
  return (configStore.customize[props.eid.toString()] ?? [])
    .map(String)
    .includes(id.toString());
};

const propWeaponSelected = (id: number) => {
  return (configStore.merge[props.eid.toString()] ?? [])
    .map(Number)
    .includes(id);
};

const propDisabled = (id: number) => {
  return propSelected(id)
    ? false
    : (
        (configStore.customize[props.eid.toString()] ?? [])
          .map(Number)
          .filter((a) => a > 0) ?? []
      ).length >= 4;
};

const simpleList = computed(() => Object.keys(basicStore.entry_list ?? {}).filter((key) => basicStore.entry_list?.[key].type == 9).sort((a, b) => (basicStore.entry_list?.[a].order ?? 0) - (basicStore.entry_list?.[b].order ?? 0)).map(Number))
const hardList = computed(() => Object.keys(basicStore.entry_list ?? {}).filter((key) => basicStore.entry_list?.[key].type == 10).sort((a, b) => (basicStore.entry_list?.[a].order ?? 0) - (basicStore.entry_list?.[b].order ?? 0)).map(Number))

const propWeaponDisabled = (id: number) => {
  const similarID
    = simpleList.value.includes(id) ? hardList.value[simpleList.value.indexOf(id) + 1] : simpleList.value[hardList.value.indexOf(id) - 1]
  // 已选中，非禁用
  if (propWeaponSelected(id)) {
    return false;
  }

  // 同类型的困难/普通已选中，禁用
  if ((configStore.merge[props.eid.toString()] ?? [])
    .map(Number)
    .includes(similarID)) {
    return true;
  }

  const type = weapon_list(0).includes(id) ? 9 : 10
  // 没有
  const count = configStore.merge[props.eid.toString()].filter(a => (basicStore.entry_list?.[a.toString()]?.type ?? 0) == type)?.length
  if ((type == 9 && count < 2) || (type == 10 && count < 1)) {
    return false
  }
  return true
};

const chooseProp = (id: number) => {
  let index = -1;
  if (!configStore.customize[props.eid.toString()]) {
    configStore.customize[props.eid.toString()] = [];
  }
  index = (configStore.customize[props.eid.toString()] ?? [])
    .map(String)
    .findIndex((a) => a == id.toString());
  if (index >= 0) {
    configStore.customize[props.eid.toString()][index] = 0;
  } else {
    if (
      (
        (configStore.customize[props.eid.toString()] ?? [])
          .map(Number)
          .filter((a) => a > 0) ?? []
      ).length >= 4
    ) {
      return;
    }
    index = (configStore.customize[props.eid.toString()] ?? [])
      .map(Number)
      .findIndex((a) => a == 0);
    if (index >= 0) {
      configStore.customize[props.eid.toString()][index] = id;
    } else {
      configStore.customize[props.eid.toString()].push(id);
    }
  }
};


const chooseWeaponProp = (id: number) => {
  if (propWeaponDisabled(id)) {
    return
  }
  // 已有，替换
  if (configStore.merge[props.eid.toString()].includes(id)) {
    configStore.merge[props.eid.toString()][configStore.merge[props.eid.toString()].findIndex(a => a == id)] = -1
  } else {
    const type = weapon_list(0).includes(id) ? 9 : 10
    // 没有
    const count = configStore.merge[props.eid.toString()].filter(a => (basicStore.entry_list?.[a.toString()]?.type ?? 0) == type)?.length
    // 普通，二槽
    if ((type == 9 && count < 2) || (type == 10 && count < 1)) {
      configStore.merge[props.eid.toString()][configStore.merge[props.eid.toString()].findIndex(a => a == -1)] = id
    }
  }
};
</script>

<template>
  <view>
    <view v-if="curEqu && curEqu.part == '武器'">
      <view v-for="(type, index) in weaponList" :key="index" class="mt-5px">
        <view
          class="green"
          @tap="foldWeaponList[index - 1] = !foldWeaponList[index - 1]"
        >
          {{
            `< ${type}属性 > - 共计${
              weapon_list(index)?.length < 10 ? "0" : ""
            }${weapon_list(index)?.length}条`
          }}
          {{ !foldWeaponList[index - 1] ? "点击折叠" : "点击展开" }}
        </view>
        <view v-show="!foldWeaponList[index - 1]">
          <!-- <view
            v-for="prop in weapon_list(index)"
            :key="prop"
            class="suiji-props strong can-select"
            :class="{
              selected: propWeaponSelected(prop),
              disabled: propWeaponDisabled(prop)
            }"
            @click="chooseWeaponProp(prop)"
          > -->
          <view
            v-for="prop in weapon_list(index)"
            :key="prop"
            class="suiji-props strong can-select"
            :class="{
              selected: propWeaponSelected(prop)
            }"
            @click="chooseWeaponProp(prop)"
          >
            <view class="num-tips">
              <text style="display: inline-block; width: 120px">
                攻击强化: {{ basicStore.entry_list?.[prop.toString()].attack.toFixed(1) }}%
              </text>
              <text>
                Buff量: {{ basicStore.entry_list?.[prop.toString()].buff }}
              </text>
            </view>
            <view
              v-for="(label, labelIndex) in basicStore.entry_list?.[
                prop.toString()
              ].props"
              :key="labelIndex"
            >
              {{
                labelIndex == 0
                  ? `${basicStore.entry_list?.[prop.toString()].order}.`
                  : ""
              }}{{ label }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="curEqu && curEqu?.alternative?.length > 0">
      <view v-for="(type, index) in filterList" :key="index" class="mt-5px">
        <view class="green" @tap="foldList[index - 1] = !foldList[index - 1]">
          {{
            `< ${type}属性 > - 共计${
              alternative_list(props.eid, index)?.length < 10 ? "0" : ""
            }${alternative_list(props.eid, index)?.length}条`
          }}
          {{ !foldList[index - 1] ? "点击折叠" : "点击展开" }}
        </view>
        <view v-show="!foldList[index - 1]">
          <view
            v-for="prop in alternative_list(props.eid, index)"
            :key="prop"
            class="suiji-props strong can-select"
            :class="{
              selected: propSelected(prop),
              disabled: propDisabled(prop)
            }"
            @click="chooseProp(prop)"
          >
            <view class="num-tips">
              <text style="display: inline-block; width: 120px">
                攻击强化: {{ basicStore.entry_list?.[prop.toString()].attack }}
              </text>
              <text>
                Buff量: {{ basicStore.entry_list?.[prop.toString()].buff }}
              </text>
            </view>
            <view
              v-for="(label, labelIndex) in basicStore.entry_list?.[
                prop.toString()
              ].props"
              :key="labelIndex"
              v-html="label.replaceAll(/@([^@]*)@/g, (m:string) => `<span style='color:#b59834'>${m.slice(1, -1)}</span>`)"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss" src="./css/eq-info.scss"></style>
